<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'

const currentTime = ref(dayjs().format('HH:mm:ss'))
let timer

const updateTime = () => {
  currentTime.value = dayjs().format('HH:mm:ss')
}

onMounted(() => {
  updateTime()
  // 每秒更新一次时间
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  // 组件卸载时清除定时器
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <div class="clock-widget">
    <span>{{ currentTime }}</span>
  </div>
</template>

<style scoped lang="scss">
.clock-widget {
  position: relative;
  right: 20px;
  top: 20px;
  width: 331px;
  height: 131px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 17.58px 6.03px -18.09px rgba(0, 0, 0, 0.2),
    0 15.07px 12.56px -12.56px rgba(0, 0, 0, 0.2),
    inset 0px -1px 3.01px 1.01px rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: center;
  justify-content: center;

  span {
    font-size: 60px;
    font-weight: 300;
    color: rgba(66, 66, 66, 1);
    font-family: 'MiSans';
  }
}
</style>
